<template>
	<div>
    	<footer class="aui-bar aui-bar-tab footer" id="footer" style="z-index:9999;">            
            <div class="aui-bar-tab-item " tapmode>
                <router-link to="/" :class="index==0 ? 'aui-active':'tab_active1'">
                    <i class="iconfont icon-shouye"></i>
                    <div class="aui-bar-tab-label margin_5">首页</div>
                </router-link>
            </div>
            
            <div class="aui-bar-tab-item" tapmode>
                <router-link to="/shop" :class="index==1 ? 'aui-active':'tab_active1'">
                    <i class="iconfont icon-shangcheng"></i>
                    <div class="aui-bar-tab-label margin_5">商城</div>
                </router-link>    
            </div>
            <div class="aui-bar-tab-item" tapmode>
                <router-link to="/orders" :class="index==2 ? 'aui-active':'tab_active1'">
                    <i class="iconfont icon-dingdan"></i>
                    <div class="aui-bar-tab-label margin_5">订单</div>
                </router-link>
            </div>
            <div class="aui-bar-tab-item" tapmode>
                <router-link to="/mine" :class="index==3 ? 'aui-active':'tab_active1'">
                    <i class="iconfont icon-ren2"></i>
                    <div class="aui-bar-tab-label margin_5">我的</div>
                </router-link>
            </div>
        </footer>
    </div>
</template>
<script>
export default{
  name: 'HomeFooter',
  data(){
    return{
        index:''
    }
  },
  methods:{
    // TabClick:function(index){
    //     this.index = index;
    // },
  },
  mounted() {
    // console.log(this.$route);
    if(this.$route.meta.title === '首页'){
        this.index = 0;
      }
      if(this.$route.meta.title === '商城'){
        this.index = 1;
      }
       if(this.$route.meta.title === '订单'){
        this.index = 2;
      }
       if(this.$route.meta.title === '我的'){
        this.index = 3;
      }
  },
  watch:{
   $route: {
    handler: function(val, oldVal){
      if(this.$route.meta.title === '首页'){
        this.index = 0;
      }
      if(this.$route.meta.title === '商城'){
        this.index = 1;

      }
       if(this.$route.meta.title === '订单'){
        this.index = 2;

      }
       if(this.$route.meta.title === '我的'){
        this.index = 3;

      }
    },
    // 深度观察监听
    deep: true
  }
},

}
</script>
<style>

</style>


